<!--  -->
<template>
  <div class="loadcicle">
    <div class="circle"></div>
    <div class="circlein"></div>
    <div class="smallcicle">
      <div class="insmallcicle"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      option: {
        series: [
          {
            name: "Access From",
            silent: true,
            type: "pie",
            radius: ["60%", "62%"],
            avoidLabelOverlap: false,
            itemStyle: {
              width: "20px",
              borderRadius: 10,
            },
            label: {
              show: false,
            },
            color: [
              "#60636F",
              "rgba(0,0,0,0)",
              "#362787",
              "rgba(0,0,0,0)",
              "#78223C",
              "rgba(0,0,0,0)",
            ],
            data: [
              { value: 40, name: "Search Engine" },
              { value: 1, name: "aaa" },
              { value: 10, name: "Direct" },
              { value: 1, name: "bbb" },
              { value: 50, name: "Video Ads" },
              { value: 1, name: "ccc" },
            ],
          },
        ],
      },
    };
  },
  //方法集合
  methods: {
    circleLoade() {
      let chart = echarts.init(document.querySelector(".circle"), "dark", {
        width: 400,
        height: 400,
      });
      chart.setOption(this.option);
    },
    circleinLoade() {
      let chart2 = echarts.init(document.querySelector(".circlein"), null, {
        width: 300,
        height: 300,
      });
      chart2.setOption(this.option);
    },
  },
  mounted() {
    this.circleLoade();
    this.circleinLoade();
  },
};
</script>
<style scoped>
.loadcicle {
  width: 400px;
  height: 400px;
  position: relative;
}
.circlein {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
  animation: roteAct 4s linear infinite;
}
@keyframes roteAct {
  0% {
    transform: rotateZ(0deg);
  }
  25% {
    transform: rotateZ(90deg);
  }
  50% {
    transform: rotateZ(180deg);
  }
  75% {
    transform: rotateZ(270deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.smallcicle {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(200, 200, 200, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  margin-top: -25px;
  margin-left: -25px;
}
.insmallcicle {
  position: absolute;
  width: 30px;
  height: 30px;
  top: 50%;
  right: 50%;
  margin-top: -15px;
  margin-right: -15px;
  background-color: #aaa;
  border-radius: 50%;
  animation: scAct 2s linear infinite;
}
@keyframes scAct {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
</style>